@import "utils";

/*框架CSS*/
* {
  //-webkit-overflow-scrolling: touch;
  //-webkit-transform: translate3d(0, 0, 0);
}

::-webkit-input-placeholder { /* WebKit browsers */
  color: #cccccc;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #cccccc;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #cccccc;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #cccccc;
}

html {
  color: #222222;
  background: #f9f9f9;
}

html, body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: 'Microsoft Yahei', '宋体', Arial;
  /*background: #ebebeb;*/
  width: 100%;
}

html, body, #app {
  height: 100%;
  overflow-x: hidden;
  margin: 0 auto;
  font-size: pxToRem(32);
}

#app {
  max-width: 750px;
}

.child-view {
  display: flex;
  flex-direction: column;
}

#main {
  flex: 1;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  //touch-action: none;
  position: relative;
  //overflow: hidden;
}

/*产品CSS*/
.amap-logo {
  display: none !important;
}

.amap-copyright {
  bottom: -100px !important;
  display: none !important;
}

.notice {
  background: #f9f9f9;
  height: pxToRem(26+25*2);
  &_inner {
    position: fixed;
    background: #f9f9f9;
    padding: pxToRem(25) 0;
    text-align: center;
    color: $color_orange;
    font-size: pxToRem(26);
    width: 100%;
    line-height: 100%;
    z-index: 1;
  }
}

/*页脚*/
footer {
  //height: 3rem;
  background: #ffffff;
  position: relative;
  //overflow: hidden;
  border-top: 1px solid #f9f9f9;
  z-index: 9998;
  & > * {
    flex: 1;
  }
  /*订单页脚*/
  &.order_footer {
    display: flex;
    align-items: center;
    //height: pxToRem(118);
    .footer_left {
      padding-left: pxToRem(40);
      span {
        color: $color_orange;
      }
    }
    .footer_mid {
      color: $color_gray_6;
      font-size: pxToRem(28);
    }
    .footer_right {
      .sh-btn {
        height: pxToRem(98);
        line-height: pxToRem(98);
        border-radius: 0;
      }
    }
  }
  /*按钮页脚*/
  &.btn_footer {
    display: flex;
    align-items: center;
    padding: pxToRem(20) pxToRem(40);
  }
  .bottom_info {
    color: $color_orange;
    width: 100%;
    position: absolute;
    height: pxToRem(80);
    line-height: pxToRem(80);
    background: #fff5e6;
    top: pxToRem(-80);
    text-align: center;
    font-size: pxToRem(28);
  }
}

input {
  border: none;
  outline: none;
  padding: 0px;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}

img {
  display: inline-block;
  max-width: 100%;
}

.triangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: pxToRem(10) solid transparent;
  border-right: pxToRem(10) solid transparent;
  border-top: pxToRem(10) solid #cccccc;
  transition: transform 0.3s;
  vertical-align: middle;
}

.checkbox {
  width: pxToRem(40);
  height: pxToRem(40);
  border: 1px solid #ccc;
  border-radius: pxToRem(40);
  position: relative;
  box-sizing: border-box;
  &.checked {
    background: #28bc93;
    border-color: #28bc93;
    &:after {
      content: '';
      display: inline-block;
      width: pxToRem(15);
      height: pxToRem(7.5);
      border-left: 2px solid #fff;
      border-bottom: 2px solid #fff;
      position: absolute;
      top: pxToRem(-2.5);
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto auto;
      transform: rotate(-45deg);
    }
  }
  &.disabled {
    position: relative;
    background: #ccc;
    &:before, &:after {
      content: '';
      position: absolute;
      height: pxToRem(30);
      width: 2px;
      background: #fff;
      display: inline-block;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto auto;
    }
    &:before {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    &:after {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  }
}

.box {
  background: #ffffff;
  margin-bottom: 0.5rem;
  &:first-of-type {
    margin-top: 0.5rem;
  }
}

.box_title {
  color: #999999;
  font-size: pxToRem(24);
  padding-left: pxToRem(40);
  display: flex;
  align-items: center;
  height: pxToRem(42);
  line-height: pxToRem(42);
}

/*列表样式*/
.list {
  font-size: pxToRem(32);
  &_item {
    display: flex;
    align-items: center;
    margin-left: 1rem;
    padding-right: 1rem;
    border-bottom: 1px solid #ebebeb;
    position: relative;
    &:last-of-type {
      border-bottom: 0;
    }
    &_left {
      flex: 1;
      padding: pxToRem(40) 0;
    }
    &_mid {
      flex: 1;
      padding: pxToRem(40) 0;
      text-align: center;
    }
    &_right {
      flex: 1;
      text-align: right;
      padding: pxToRem(40) 0;
      input {
        margin-top: pxToRem(-40);
        margin-bottom: pxToRem(-40);
        padding: pxToRem(40) 0;
        text-align: right;
        width: 100%;
      }
    }
    &.arrow_item {
      padding-right: 2rem;
      &:after {
        content: '';
        position: absolute;
        background-image: url('~@/assets/img/icon_arrow.png');
        background-size: 100%;
        height: pxToRem(19);
        width: pxToRem(11);
        //border-top: 1px solid #707070;
        //border-right: 1px solid #707070;
        //transform: rotate(45deg);
        right: 1rem;
        display: inline-block;
        top: 0;
        bottom: 0;
        margin: auto 0;
      }
      .list_item_right {
        color: #cccccc;
      }
    }
    &.icon_item {
      .list_item_left {
        display: flex;
        align-items: center;
        flex: 0 1 auto;
        width: pxToRem(70);
        margin-right: pxToRem(40);
        img {
          height: pxToRem(70);
        }
      }
      .list_item_right {
        flex: 1;
        height: auto;
        line-height: 130%;
        padding: pxToRem(40) 0;
        text-align: justify;
        color: #666666;
      }
    }
  }
  &.order_list {
    border-bottom: 1px solid #e6e6e6;
    margin-left: pxToRem(40);
    padding: pxToRem(40) 0;
    &:last-of-type {
      border: 0;
    }
    .list_item {
      margin-left: 0;
      border-bottom: 0;
      &_left {
        flex: 0 0 auto;
        width: pxToRem(160);
        color: $color_gray_9;
        padding: 0 0 pxToRem(40);
      }
      &_right {
        height: auto;
        line-height: 130%;
        padding: 0 0 pxToRem(40);
      }
      &:last-of-type {
        .list_item_left, .list_item_right {
          padding: 0;
        }
      }
    }
    &.mini_list {
      .list_item {
        &_left, &_right {
          padding: 0 0 pxToRem(20);
          font-size: pxToRem(28);
        }
      }
    }
    &.pay_list {
      position: relative;
      &:after {
        content: '';
        position: absolute;
        display: inline-block;
        border-left: 1px solid #e6e6e6;
        border-top: 1px solid #e6e6e6;
        width: pxToRem(15);
        height: pxToRem(15);
        background: #ffffff;
        transform: rotate(45deg);
        top: pxToRem(-(21.21320/2));
        right: pxToRem(80);
      }
      .list_item {
        &_left {
          color: #333333;
        }
      }
    }
    &.gray_list {
      .list_item {
        &_left, &_right {
          color: #999999;
        }
      }
    }
  }
}

// 订单banner
.order_banner {
  min-height: pxToRem(99);
  background: #e2e7eb;
  padding: pxToRem(40);
  background-image: url('~@/assets/img/banner_order.png');
  background-size: 100%;
  background-repeat: no-repeat;
  &_title {
    color: #666666;
    font-size: pxToRem(28);
  }
  &_bottom {
    display: flex;
    align-items: flex-end;
    &_amount {
      flex: 1;
      color: #222222;
      font-size: pxToRem(60);
    }
    &_status {
      flex: 1;
      text-align: right;
      color: #ff5c2a;
    }
  }
}

.padding-mod {
  padding: 0.5rem;
}
